<template>
    <router-view />
</template>

<style>
:root {
  /* CSS变量一定要以 -- 开头 */
  --themeBtn: rgb(7, 108, 224);
  --themeBtn-gradient-color:rgba(7, 108, 224,0.5);
  /* --themeBtn-hover-color:""; */
}
  @font-face {
    font-family: 'PingFang';
    src: url('./assets/PingFang\ SC\ Regular.ttf');
    font-weight: 500;
    font-style: normal;
  }
#app {
    font-family:
        "Hiragino Sans GB",
        "Heiti SC",
       "Helvetica Neue",
        Helvetica,
        Arial,
        "Microsoft YaHei",
        "WenQuanYi Micro Hei",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    box-sizing: border-box;
}

div,span,form{
    box-sizing: border-box;
}
.flex{
  display: flex;
  flex-wrap: nowrap;
    background: var(--selectedColor);

}
.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}
.flex-center{
  display: flex;
  align-items: center;
}
.flex-align{
  display: flex;
  align-items: center;
}
.items-center{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex-between{
  display: flex;
  justify-content: space-between;
}
.flex-around{
  display: flex;
  justify-content: space-around;
}
.flex-center{
   display: flex;
  justify-content: center;
}
.flex-end{
   display: flex;
  justify-content: flex-end;
}
img{
    /* image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges; */
}
.el-dialog__body{
    max-height: 80vh;
    overflow-y: auto;
}
.el-dialog{
  margin-top: 10vh!important;
}

 .custom_hover1:hover{ color:rgb(252, 192, 46)!important }
 .custom_hover2:hover{ color:rgb(246, 124, 1)!important }
 .custom_hover3:hover{ color:rgb(230, 74, 25)!important }
 .custom_hover4:hover{ color:rgb(216, 27, 67)!important }
 .custom_hover5:hover{ color:rgb(142, 36, 170)!important }
 .custom_hover6:hover{ color:rgb(81, 45, 167)!important }
 .custom_hover7:hover{ color:rgb(31, 135, 232)!important }
 .custom_hover8:hover{ color:rgb(0, 135, 129)!important }
 .custom_hover9:hover{ color:rgb(5, 160, 69)!important }
.custom_hover10:hover{ color:rgb(254, 216, 53)!important }
.custom_hover11:hover{ color:rgb(251, 140, 0)!important }
.custom_hover12:hover{ color:rgb(245, 81, 30)!important }
.custom_hover13:hover{ color:rgb(235, 29, 78)!important }
.custom_hover14:hover{ color:rgb(156, 40, 177)!important }
.custom_hover15:hover{ color:rgb(93, 53, 176)!important }
.custom_hover16:hover{ color:rgb(32, 151, 243)!important }
.custom_hover17:hover{ color:rgb(2, 150, 136)!important }
.custom_hover18:hover{ color:rgb(76, 176, 80)!important }
.custom_hover19:hover{ color:rgb(255, 235, 60)!important }
.custom_hover20:hover{ color:rgb(255, 167, 39)!important }
.custom_hover21:hover{ color:rgb(254, 87, 34)!important }
.custom_hover22:hover{ color:rgb(235, 65, 101)!important }
.custom_hover23:hover{ color:rgb(170, 71, 188)!important }
.custom_hover24:hover{ color:rgb(103, 59, 183)!important }
.custom_hover25:hover{ color:rgb(66, 165, 246)!important }
.custom_hover26:hover{ color:rgb(38, 165, 154)!important }
.custom_hover27:hover{ color:rgb(131, 198, 131)!important }
.custom_hover28:hover{ color:rgb(255, 241, 118)!important }
.custom_hover29:hover{ color:rgb(255, 183, 78)!important }
.custom_hover30:hover{ color:rgb(255, 138, 102)!important }
.custom_hover31:hover{ color:rgb(241, 98, 126)!important }
.custom_hover32:hover{ color:rgb(185, 104, 199)!important }
.custom_hover33:hover{ color:rgb(121, 134, 204)!important }
.custom_hover34:hover{ color:rgb(100, 181, 246)!important }
.custom_hover35:hover{ color:rgb(128, 203, 196)!important }
.custom_hover36:hover{ color:rgb(165, 214, 167)!important }
.custom_hover37:hover{ color:rgb(255, 245, 156)!important }
.custom_hover38:hover{ color:rgb(255, 204, 128)!important }
.custom_hover39:hover{ color:rgb(255, 171, 145)!important }
.custom_hover40:hover{ color:rgb(251, 135, 158)!important }
.custom_hover41:hover{ color:rgb(207, 147, 217)!important }
.custom_hover42:hover{ color:rgb(158, 168, 219)!important }
.custom_hover43:hover{ color:rgb(144, 202, 248)!important }
.custom_hover44:hover{ color:rgb(178, 223, 220)!important }
.custom_hover45:hover{ color:rgb(200, 230, 202)!important }
.custom_hover46:hover{ color:rgb(255, 255, 255)!important }
.custom_hover47:hover{ color:rgb(222, 222, 222)!important }
.custom_hover48:hover{ color:rgb(169, 169, 169)!important }
.custom_hover49:hover{ color:rgb(75, 75, 75)!important }
.custom_hover50:hover{ color:rgb(53, 53, 53)!important }
.custom_hover51:hover{ color:rgb(33, 33, 33)!important }
.custom_hover52:hover{ color:rgb(0, 0, 0)!important }
</style>

<script>
export default {
  mounted(){
  let themeBtn=localStorage.getItem('themeBtn')?localStorage.getItem('themeBtn'):'rgb(7, 108, 224)'
  // let themeBtnGra=localStorage.getItem('themeBtn')?localStorage.getItem('themeBtn'):'rgb(7, 108, 224)'
      document.getElementsByTagName('body')[0].style.setProperty('--themeBtn', themeBtn)
  },
}
</script>